<template>
  <div class="HomeList">
    <div class="tableed bigTableStyle">
      <el-table
      border
        :data="tableData"
        height="100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        style="width: 100%;"
      >
        <el-table-column prop="Myindex" label="序号" width="60"></el-table-column>
        <el-table-column prop="bdzmc" label="变电站名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="whbzmc" label="运行班组" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dydj" label="电压等级" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="tyrq" label="投运日期" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="whdj" label="污秽等级" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="sfsnz" label="是否怄纽站" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="bzfs" label="布置方式" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="yxzt" label="设备状态" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dzlx" label="电站类型" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </div>
    <div class="paged elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { ParameterManagementModule } from "@/store/modules/ParameterManagement";

@Component
export default class extends Vue {
  //选择数据
  public multipleSelection: Array<any> = [];
  //table表格相关事件数据
  tableData: any = [
    {
      date: "1",
      name: "xxxxxx",
      address: "xxxxxxxxxxxxxxxxxxxxxxx",
    },
  ];
  //分页数据事件相关
  pages = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };

  // currentPage = this.pages.page;
  // currentPageSize = this.pages.pageSize;
get changeid() {
  return ParameterManagementModule.clickTreeobj
}
  //表格数据
  handleSelectionChange(val: any) {
    this.multipleSelection = val;
    // console.log(this.multipleSelection);
  }
  //   分页
  handleSizeChange(val: any) {
    this.pages.pageSize=val

    var form = ParameterManagementModule.clickTreeobj;
    form.size = val;
    // this.currentPageSize = val;
    ParameterManagementModule.getRigthListArea(form);

    // console.log(`每页 ${val} 条`);
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page=val
    var form = ParameterManagementModule.clickTreeobj;
    form.page = val;
    // this.currentPage = val;
    ParameterManagementModule.getRigthListArea(form);
  }
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //  mounted() {
  //    console.log(this.tableDataObj);
  // }
  get tableDataObjs() {
    return ParameterManagementModule.getRigthList;
  }
  // 监听路由变化
  @Watch("changeid", { deep: true })
  public idchange(to: any, from: any) {
      console.log(to);
      if (to.id!=from.id) {
        this.pages.page=1
      }
      console.log(this.pages.page); 
  }
  @Watch("tableDataObjs", { deep: true })
  public routechange(to: any, from: any) {
    // console.log(to);
    this.tableData = to.records;
    let page=this.pages.page
    let size=this.pages.pageSize

    this.tableData.map((item,i) => {
      item.Myindex=(page - 1)*size +i+1
      if (item.tyrq) {
        item.tyrq = item.tyrq.slice(0, 10);
      }
      // console.log(item);
    });
    console.log(to.records[0].yxzt);

    this.pages.totalSize = to.total;
  }
}
</script>

<style lang="scss" scoped>
.HomeList {
  width: 100%;
  height: 100%;
  .tableed {
    width: 100%;
    height: calc(100% - 0.6rem);
  }
  .paged {
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .buttom-box {
    display: flex;
    justify-content: center;
    align-items: center;
    > .el-button {
      margin: 0 0.6rem;
    }
  }
}
</style>

